import React from "react";
import ReactDOM from "react-dom";
import 'antd/dist/antd.css';
import {routes} from './router/index'
import Header from "./components/header";
import {
    Layout,
    Button,
    Row
} from 'antd'

// react-router-dom 提供了一系列的组件，react组件化非常完美
import {
    Link,
    BrowserRouter as Router,
    Switch,
    Route,
    Redirect,
    useHistory,
    useParams,
    useLocation
} from 'react-router-dom';
// document.createElement('div')
const App=()=>{
    return (
        <Router>
            <Layout className="page">
                <Header />
                <Layout.Content>
                    <div className="wrap">
                        <Switch>
                            {/* <Route to="" exact component /> */}
                            {routes.map((route,index)=>{
                                return (
                                    <Route
                                     key={index}
                                     path={route.path}
                                     exact={route.exact}
                                     render={props=>{
                                         return route.render(props)
                                     }}
                                     ></Route>
                                )
                            })}
                        </Switch>
                    </div>
                </Layout.Content>
            </Layout>
        </Router>
    )
}

const Home=()=>(
    <>
        <h1>Home</h1>
        <FakeText />
    </>
)

const About=(
    //{ history,
    // match:{params:{name}}}
    )=>{
    // console.log(props);
    // console.log(name);

    const {name}=useParams();
    const history = useHistory();
    const {pathname}=useLocation();
    console.log(history,pathname);

    return (
        <>
            {/* 登录 路由守卫 */}
            {name !== 'xiaobai'?<Redirect to="/" />:''}
            <h1>About:{name}</h1>

            <Button type="primary">你好</Button>
            <button onClick={()=>history.push('/')}>Go to Home</button>
            
            <FakeText />
        </>
    )
}

const Concat=()=>(
    <>
        <h1>Concat</h1>
        <FakeText />
    </>
)

const FakeText=()=>(
    <p>
        fake 666!
    </p>
)

ReactDOM.render(
    <App/>,
    document.getElementById('root')
)
